<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand">工作记录</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable workrecord">
      <div style="padding-top: 15px;">
        <el-row type="flex" justify="center" style="margin-bottom: 20px;">
          <el-col :span="23">
            <el-col style="width: 320px;height: 360px;border: 2px solid #ececec;">
              <el-calendar v-model="data">
                <template
                  slot="dateCell"
                  slot-scope="{date, data}">
                  <div style="width: 100%;height: 100%;">
                    <p>
                      {{ data.day.split('-').slice(2).join('-') }}
                    </p>
                  </div>
                </template>
              </el-calendar>
              <br>
              
                

            </el-col>
            <el-col class="secondbox">
              <el-col style="padding-top: 20px;padding-left: 15px;">
                <div class="tabletitle">
                  <i class="iconfont icon-livesvg06" style="color: #ff8c32;"></i>
                  <span style="margin-left: 10px;font-weight: 700;">简历推送情况</span>
                </div>
              </el-col>
              <el-col style="padding-left: 15px;padding-top: 28px;">
                
                <div style="height: 250px;" v-if="pushinfolist.length !== 0">
                  <el-scrollbar style="height: 100%;">
                    <el-row>
                      <el-col v-for="(item,index) in pushinfolist" :key="index" class="list" style="height: 100%;">
                        <el-col style="width: 6%;">
                          <el-row type="flex" justify="center">
                            <el-col style="width: 14px;height: 100%;">
                              <div
                                style="width: 12px;height: 12px;border-radius: 50%;border: 1px solid #1864c7;background-color:#4979fd;">
                                <div
                                  style="width: 6px;height: 6px;border-radius: 50%;background-color: #fff;margin: 0 auto;margin-top: 3px;"></div>
                              </div>
                              <div style="width: 5px;height: 34px;background-color: #ececec;margin: 0 auto;"
                                   v-if="index !== pushinfolist.length - 1" class="box1"></div>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-collapse v-model="activeName" accordion @change="handleChange">
                          <el-collapse-item :name="index">
                            <template slot="title">
                              <el-col style="width: 90%;">
                                <p style="font-size: 14px;font-weight: 400;line-height: 20px;"
                                   :style="{color : item.colour}">{{item.content}}</p>
                              
                              </el-col>
                            </template>
                            <el-col style="width: 90%;padding-left: 6%;">
                              <div v-for="(item1,index1) in item.details" :key="index1"
                                   v-if="item.details.length !== 0">{{item1}}
                              </div>
                              <div v-if="item.details.length == 0">暂无详细信息</div>
                            </el-col>
                          
                          </el-collapse-item>
                        
                        </el-collapse>
                      </el-col>
                    </el-row>
                  </el-scrollbar>
                </div>
                <div v-if="pushinfolist.length == 0">
                  <div style="margin-top: 30px;text-align: center;margin-bottom: 30px;">
                    <img src="../../../static/image/leida.png" alt="" style="width: 350px;">
                    <p style="color: #b6b6b6;margin-top: 30px;">暂无数据!</p>
                  </div>
                
                </div>
              </el-col>
            
            </el-col>
            <el-col class="thirdbox workrecord1">
              <el-col style="padding-top: 20px;padding-left: 15px;">
                <div class="tabletitle">
                  <i class="iconfont icon-c15_show" style="color: #0f98fd;"></i>
                  <span style="margin-left: 10px;font-weight: 700;">简历上传情况</span>
                </div>
              </el-col>
              <el-col style="padding-left: 15px;padding-top: 28px;padding-right: 15px;">
                <div style="height: 250px;" v-if="uploadinfolist.length !== 0">
                  <el-scrollbar style="height: 100%;">
                    <el-row>
                      <el-col
                        style="border-bottom: 1px solid #ccc;min-height: 50px;margin-bottom: 10px;padding-bottom: 10px;overflow: hidden;"
                        v-for="(item,index) in uploadinfolist" :key="index">
                        <el-collapse accordion>
                          <el-collapse-item :name="index">
                            <template slot="title">
                              <el-col style="width: 35px;height: 35px;margin-right: 10px;">
                                <i class="el-icon-user-solid thirdicon"></i>
                              </el-col>
                              <el-col style="width: 75%;">
                                <span style="font-size: 14px;padding-bottom: 5px;font-weight: 400;line-height: 18px;"
                                      :style="{color: item.colour}">{{item.content}}</span>
                              </el-col>
                              <el-col style="width: 15%;width: 15%;float: right;" v-if="clock">
                                <el-button size="small" type="primary" round class="warn"
                                           v-if="item.uploadVOList.length !== 0" @click="remind(item.uploadVOList)">提醒
                                </el-button>
                              </el-col>
                            </template>
                            <div v-for="(item1,index1) in item.details" :key="index1" v-if="item.details.length !== 0">
                              {{item1}}
                            </div>
                            <div v-if="item.details.length == 0">今日任务已完成</div>
                          </el-collapse-item>
                        </el-collapse>
                      </el-col>
                    </el-row>
                  </el-scrollbar>
                </div>
                
                <div v-if="uploadinfolist.length == 0">
                  <div style="margin-top: 30px;text-align: center;margin-bottom: 30px;">
                    <img src="../../../static/image/leida.png" alt="" style="width: 350px;">
                    <p style="color: #b6b6b6;margin-top: 30px;">暂无数据!</p>
                  </div>
                
                </div>
              </el-col>
            </el-col>
          </el-col>
        
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="23">
            <el-col style="width: 320px;height: 360px;">
            
            </el-col>
            <el-col class="secondbox">
              <el-col style="padding-top: 20px;padding-left: 15px;">
                <div class="tabletitle">
                  <i class="iconfont icon-shaixuanjianli" style="color: #00b9d5;"></i>
                  <span style="margin-left: 10px;font-weight: 700;">客户未反馈简历情况</span>
                </div>
              </el-col>
              <el-col style="padding-top: 28px;">
                <div style="height: 250px;" v-if="nofeedbackinfolist.length !== 0">
                  <el-scrollbar style="height: 100%;">
                    <el-row style="padding-left: 15px;padding-right: 15px;">
                      <el-col v-for="(item,index) in nofeedbackinfolist" :key="index">
                        <el-col style="margin-bottom: 10px;">
                          <div style="color:#4779fd;background-color: #f5f8f8;">
                            <span>{{item.name}} ({{item.num}})   </span></div>
                        </el-col>
                        <el-col style="margin-bottom: 15px;font-size: 14px;" v-for="(item1,index1) in item.resume"
                                :key="index1">
                          <p style="width: 32%;display: inline-block;text-align: center;">{{item1.name}}</p>
                          <p style="width: 32%;display: inline-block;text-align: center;">{{item1.postName}}</p>
                          <p style="width: 32%;display: inline-block;text-align: center;">{{item1.postLevel}}</p>
                        </el-col>
                      </el-col>
                    </el-row>
                  </el-scrollbar>
                </div>
                
                
                <div v-if="nofeedbackinfolist.length == 0">
                  <div style="margin-top: 30px;text-align: center;margin-bottom: 30px;">
                    <img src="../../../static/image/leida.png" alt="" style="width: 350px;">
                    <p style="color: #b6b6b6;margin-top: 30px;">暂无数据!</p>
                  </div>
                </div>
              </el-col>
            
            </el-col>
            <el-col style="" class="thirdbox1">
              <el-form ref="form" :model="form" :rules="rules">
                <el-form-item prop="todaytask">
                  <el-input :disabled="inputdis" type="textarea" :placeholder="taskinfo"
                            resize="none" v-model="form.todaytask"></el-input>
                </el-form-item>
                <el-button class="save" :disabled="savedis" @click="updatetodaywork('form')" v-if="btndis">保存
                </el-button>
              </el-form>
            
            
            </el-col>
          </el-col>
        </el-row>
      </div>
    
    </div>
    
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">选择日期超过当前日期</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="handleClose">确 定</el-button>
    <el-button round @click="handleClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from 'axios'
  import tagsView from '../../store/modules/tagsView'
  export default {
    name: "workrecord",
    data() {
      return {
        date: moment(new Date()).format('YYYY-MM-DD'),
        data: moment(new Date()).format('YYYY-MM-DD'),
        activeName: null,
        activeName1: null,
        pushinfolist: [],
        uploadinfolist: [],
        nofeedbackinfolist: [],       
        savedis: false,    
        form: {
          todaytask: '',
          id: ''
        },
        rules: {
          'todaytask': [
            {required: true, message: '请输入今日工作', trigger: 'blur'},
          ]
        },
        errordialogVisible: false,
        inputdis: false,
        btndis: true,
        clock: true,
        taskinfo: '请输入今日工作...'
      }
    },
    created() {
      this.selectpushinfo();
      this.selectuploadinfo();
      this.selectnofeedbackinfo();
      this.selecttodaywork();
      if(tagsView.state.identity == 7){
        this.btndis = false;
        this.inputdis = true;
      }

    },
    methods: {     
      test(date) {
        this.activeName = null;
        $(".list").find('.box1').height(34);
        var date = moment(date).format('YYYY-MM-DD');
        axios.post(this.url + '/workrecord/checktime', {
          time: date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.date = date;
            this.selectpushinfo();
            this.selectuploadinfo();
            this.selectnofeedbackinfo();
            this.selectnofeedbackinfo();
            this.selecttodaywork();
            if (this.date < moment(new Date()).format('YYYY-MM-DD')) {
              this.inputdis = true;
              this.btndis = false;
              this.clock = false;
              this.taskinfo = "暂无数据!"
            } else {
              this.inputdis = false;
              this.btndis = true;
              this.taskinfo = "请输入今日工作..."
              setTimeout(() => {
                this.clock = true;
              }, 100)
            }
          }
          if (res.data.code == -300) {
            this.data = this.date;
            this.errordialogVisible = true;
            document.documentElement.style.overflow = 'hidden';
          }
        })
      },
      selectpushinfo() {
        axios.post(this.url + '/workrecord/selectpushinfo', {
          time: this.date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.pushinfolist = res.data.data;
          }
        })
      },
      selectuploadinfo() {
        axios.post(this.url + '/workrecord/selectuploadinfoassistant', {
          time: this.date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.uploadinfolist = res.data.data;
          }
        })
      },
      selectnofeedbackinfo() {
        axios.post(this.url + '/workrecord/selectnofeedbackinfo', {
          time: this.date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.nofeedbackinfolist = res.data.data;
          }
        })
      },
      remind(data) {
        axios.post(this.url + '/workrecord/remind', {
          uploadVOList: data
        }).then(res => {
          this.unlogin(res.data.code);
        })
      },
      selecttodaywork() {
        axios.post(this.url + '/workrecord/selecttodaywork', {
          time: this.date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.form.todaytask = res.data.data.content;
            this.form.id = res.data.data.id;
          }
        })
      },
      updatetodaywork(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.savedis = true;
              axios.post(this.url + '/workrecord/updatetodaywork', {
                content: this.form.todaytask,
                id: this.form.id
              }).then(res => {
                this.unlogin(res.data.code);
                if (res.data.code == 200) {
                  this.savedis = false;
                  this.$refs.form.resetFields();
                  this.selecttodaywork()
                }
              })
            }
          }
        )
      },
      handleChange(val) {
        $(".list").find('.box1').height(34);
        var time = null;
        clearTimeout(time);
        time = setTimeout(() => {
          if (typeof (val) == 'number') {
            $(".list").eq(val).find('.box1').height($(".list").eq(val).height());
          } else {
            $(".list").eq(val).find(".box1").height(34);
          }
        }, 300)
      },
      handleClose() {
        this.errordialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
    },
    watch: {
      'data': function (val) {
        this.test(moment(val).format('YYYY-MM-DD'))
      }
    }
  }
</script>

<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .secondbox {
    height: 360px;
    margin-left: 24px;
    margin-right: 24px;
    border: 2px solid #ececec;
  }
  
  .thirdbox {
    height: 360px;
    border: 2px solid #ececec;
  }
  
  .thirdbox1 {
    height: 360px;
    margin-bottom: 30px;
  }
  
  .warn {
    width: 56px;
    height: 24px;
    line-height: 0;
  }
  
  .thirdicon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #4f76ff;
    text-align: center;
    line-height: 35px;
    color: #fff;
  }
  
  .save {
    margin-top: 13px;
    width: 150px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    border-radius: 4px;
    margin-right: 43px;
    background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
  }
  
  @media screen and (min-width: 1200px) and (max-width: 1900px) {
    .secondbox {
      width: 30%;
    }
    
    .thirdbox {
      width: 40%;
      float: right;
    }
    
    .thirdbox1 {
      width: 40%;
      float: right;
    }
  }
  
  @media only screen and (min-width: 1920px) {
    .secondbox {
      width: 32.9%;
    }
    
    .thirdbox {
      width: 46.4%;
    }
    
    .thirdbox1 {
      width: 46.4%;
    }
  }
</style>
